<template>
	<view>
		<van-popup position="center" :show="show" round>
			<view class="popupCla">
				<view style="font-size: 40rpx;font-weight: bold;color: #FC6B52;">提现</view>
				<view>
					<input class="inpCla" placeholder="请输入提现金额" v-model="amount"/>
				</view>
				<view>
					<input class="inpCla" placeholder="请输入小程序支付密码" v-model="payPass" type="password"/>
				</view>
				<view class="btnCla">
					<button type="primary" style="background: #FF7301;height: 70rpx;line-height: 70rpx;" @tap="disapFun">取消</button>
					<button type="primary" style="background: #FC6B52;height: 70rpx;line-height: 70rpx;" @tap="accountsFun">确定</button>
				</view>
			</view>
		</van-popup>
		<van-popup position="center" :show="show_" round>
			<view class="popupCla">
				<view style="font-size: 40rpx;font-weight: bold;color: #FC6B52;">设置密码</view>
				<view>
					<input class="inpCla" placeholder="请设置密码" v-model="passWord" type="password"/>
				</view>
				
				<view>
					<input class="inpCla" placeholder="请重新设置密码" v-model="repoPassWord" type="password"/>
				</view>
				<view class="btnCla">
					<button type="primary" style="background: #FF7301;height: 70rpx;line-height: 70rpx;" @tap="cancelFun">取消</button>
					<button type="primary" style="background: #FC6B52;height: 70rpx;line-height: 70rpx;" @tap="okFun">确定</button>
				</view>
			</view>
		</van-popup>
		<view class="upCont">
			<view style="color: #FFFFFF;font-size: 34rpx;">可提现余额</view>
			<view style="color: #FFEF5D;font-weight: bold;" @tap="canshowFun">
				<text style="font-size: 70rpx;">{{cash}}</text>
				<text style="font-size: 34rpx;">元</text>
			</view>
			<view style="display: flex;width: 100%;justify-content: space-between;margin-top: 10rpx;">
				<view style="text-align: center;">
					<view class="titCla">累计收益 ( 元 )</view>
					<view class="amountCla">{{totalData}}</view>
				</view>
				<view style="text-align: center;">
					<view class="titCla">今日收益 ( 元 )</view>
					<view class="amountCla">{{dayData}}</view>
				</view>
			</view>
		</view>
		<view  >
			<view class="titleCla"> 账单明细 </view>
			<scroll-view scroll-y="true" @scrolltolower="scrollto" class="BelowCon" :refresher-enabled="refresher" @refresherrefresh="onRefresh" refresher-background="#ffffff">
				<view>
					<view v-for="(itme,index) in detailedList" :key="index" >
						<view class="montCla">
							<view>
								<view>{{itme[0].create_time_}}</view>
								<view style="font-size: 28rpx;color: #949494;">
									<text>收入{{itme[0].map.addCash}}</text>
									<text style="margin-left: 10rpx;">支出{{itme[0].map.subCash}}</text>
								</view>
							</view>
							<view> 统计 </view>
						</view>
						<view v-for="(itm,inde) in itme" :key="inde" style="" class="detailsCla">
							<view style="display: flex;align-items: center;">
								<view>
									<image :src="Redenve" style="width: 60rpx;height: 68rpx;"></image>
								</view>
								<view style="margin-left: 22rpx;">
									<view style="font-size: 32rpx;color:#393030;font-weight: bold;">{{itm.paytype}}</view>
									<view style="font-size: 24rpx;color: #949494;font-weight: 300;margin-top: 5rpx;">{{itm.newTime}}</view>
								</view>
							</view>
							<view  :style="{color: itm.color }" class="monCla">
								{{itm.cash}}
							</view>
							
						</view>
						
					</view>
					<view style="height: 90rpx;width: 100vw;display: flex;justify-content: center;align-items: center;font-size: 18rpx;color: #393030;" v-if="canShow">
						<van-loading type="spinner" color="#393030" size="16px">加载中...</van-loading>
					</view>
					<view style="height: 90rpx;width: 100vw;display: flex;justify-content: center;align-items: center;font-size: 23rpx;color: #393030;" v-if="canLoad">
						<text>- 数据加载完毕 -</text>
					</view>
				</view>
			</scroll-view>
			
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				user_openId: "",
				user_id: "",
				cash: "",
				amount: "",
				detailedList: [],
				currentPage: 1,
				Redenve: "http://img.curiousmore.com/14795478972",
				dayData: 0,
				totalData: 0,
				canShow: true,
				canLoad: false,
				canReq: true,
				show: false,
				pay_pass: null,
				show_: false,
				passWord: "",
				repoPassWord: "",
				payPass: "",
				refresher: false
			}
		},
		
		methods: {
			
			// 下拉刷新
			onRefresh() {
				this.refresher = true
				setTimeout(() => {
					this.refresher = false
				},2000)
			},
			
			// 密码设置框取消函数
			cancelFun() {
				this.show_ = false
			},
			
			// 设置密码确定函数
			okFun() {
				
				if( this.passWord === "" ) {
					uni.showToast({
						title: "请输入密码",
						icon: "none"
					})
					
				}else if(this.passWord !== this.repoPassWord) {
					uni.showToast({
						title: "两次密码不一致",
						icon: "none"
					})
				}else {
					this.$myRequest({
						url: "/userInfo/updateUserPayPass",
						methed: "post",
						header: {
							'content-type' : 'application/json'
						},
						data: {
							user_id: this.user_id,
							pay_pass: this.passWord
						}
					}).then((res) => {
						if(res.code == 0) {
							this.$userInfoRefresh(this.user_id)
							try{
								this.pay_pass = uni.getStorageSync('userif_list').pay_pass
							}catch(e){}
							this.show_ = false
							this.show = true
						}else {
							uni.showToast({
								title: res.message,
								icon: "none"
							})
						}
						
					})
				}
				
			},
			
			// 弹出框消失
			disapFun() {
				this.show = false
				this.payPass = ""
			},
			
			// 显示弹框
			canshowFun() {
				let me = this
				if(!this.pay_pass) {
					uni.showModal({
					    title: '设置密码',
					    content: '提现请设置密码',
					    success: function (res) {
					        if (res.confirm) {
					            me.show_ = true
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
				}else {
					this.show = true
				}
			},
			
			// 收益统计
			profitFun() {
				this.$myRequest({
					url: "/userRecommenderIncomeLog/queryMechanismRecommenderCash",
					data: {
						user_id: this.user_id
					}
				}).then((res) => {
					this.totalData = res.data.totalCash
					this.tdayData = res.data.dayCash
				})
			},
			
			// 下拉到底部
			scrollto() {
				if(this.canReq) {
					this.currentPage++
					this.detailedFun()
				}else {
					
				}
				
			},
			
			// 数组
			sortClass(sortData){
			  const groupBy = (array, f) => {
			    let groups = {};
			    array.forEach((o) => {
			      let group = JSON.stringify(f(o));
			      groups[group] = groups[group] || [];
			      groups[group].push(o);
			    });
			    return Object.keys(groups).map((group) => {
			      return groups[group];
			    });
			  };
			  const sorted = groupBy(sortData, (item) => {
			    return item.create_time.substring(0,7); 
			  });
			  return sorted;
			},
			
			// 明细的列表请求
			detailedFun() {
				this.canShow = true
				this.$myRequest({
					url: "/userRecommenderIncomeLog/queryMyMechanismRecommenderList",
					data: {
						user_id: this.user_id,
						pageSize: 7,
						currentPage: this.currentPage
					}
				}).then((res) => {
					 let a = []
					 if(res.data.length < 7) {
						 this.canShow = false
						 this.canReq = false
						 this.canLoad = true
					 }else {
						 this.canReq = true
					 }
					 if(res.data.length != 0) {
						 res.data.forEach((val) => {
						 	 val.create_time_ = val.create_time.substring(0,7)
						 	 val.newTime = val.create_time.substring(6,7) + "月" + val.create_time.substring(9,10) + "日" + "  " + val.create_time.substring(11,16)
						 	 if(val.cash.toString().indexOf("-") !== -1) {
						 		 val.paytype = "提现成功"
								 val.color = "#393030" 
						 	 }else {
						 		 val.paytype = "到账成功"
								 val.color = "red" 
								 val.cash = "+" + val.cash
						 	 }
						  })
						  a = this.sortClass(res.data)
						 if(this.detailedList.length == 0) {
						 	this.detailedList = a
						 }else {
						 	let str = this.detailedList[this.detailedList.length - 1 ][0].create_time
						 	let str1 = a[0][0].create_time
						 	if(str.substring(0,7) == str1.substring(0,7)) {
						 		let end = this.detailedList[this.detailedList.length - 1 ]
						 		let sta = a[0]
						 		this.detailedList.splice(this.detailedList.length - 1,1)
						 		a.splice(0,1)
						 		let merge = end.concat(sta)
						 		merge = [merge]
						 		this.detailedList = [...this.detailedList,...merge,...a]
						 	}else {
						 		this.detailedList = [...this.detailedList,...a]
						 	}
							this.canShow = false
						 }
					 }else {
						 uni.showToast({
						 	title: "加载完毕",
							icon: "none",
							duration: 2000
						 })
						 this.canShow = false
						 this.canLoad = true
					 }
				})
				this.canShow = false
			},
			
			userInfo() {
				this.$myRequest({
					url: "/userInfo/findById",
					data: {
						id: this.user_id
					}
				}).then((res) => {
					this.cash = res.data.cash
				})
			},
			
			// 插入openid的函数
			insertOpenId() {
				this.$myRequest({
					url: "/rechargeInfo/insert",
					methed: "post",
					header: {
						'content-type' : 'application/json'
					},
					data: {
						user_id: this.user_id,
						wxPay: this.user_openId
					}
				}).then((res) => {})
			},
			
			// 提现功能转账到微信账户
			accountsFun() {
				if(!Number(this.amount) || Number(this.amount) > this.cash || this.amount == "") {
					uni.showToast({
						title: "请检查要提现的金额",
						icon: "none",
						duration: 3000
					})
					this.amount = ""
				}else {
					this.$myRequest({
						url: "/pay/wxTransfer",
						methed: "post",
						data: {
							user_id: this.user_id,
							amount: this.amount,
							pay_pass: this.payPass
						},
						header: {
							'content-type' : 'application/json'
						}
					}).then((res) => {
						if(res.code == 0) {
							uni.showToast({
								title: "提现成功",
								duration: 2000
							})
							// 全局请求个人信息函数 可通过函数直接获取修改后的信息
							this.$userInfoRefresh(this.user_id)
							try{
								this.cash = uni.getStorageSync('userif_list').cash
							}catch(e){}
							this.show = false
						}else {
							uni.showToast({
								title: res.message,
								icon: "none"
							})
						}
						this.amount = ""
					})
				}
			}
		},
		
		onLoad() {
			try {
				this.user_id = uni.getStorageSync('userif_list').user_id
				this.pay_pass = uni.getStorageSync('userif_list').pay_pass
				this.user_openId = uni.getStorageSync('opnid')
				this.cash = uni.getStorageSync('userif_list').cash
				this.insertOpenId()
				this.detailedFun()
				this.profitFun()
			}catch(e){}
			
		}
	}
</script>
<style lang="scss" scoped>
	.upperCla {
		height: 200rpx;
		width: 750rpx;
		font-size: 40rpx;
		font-weight: bold;
		line-height: 200rpx;
		text-align: center;
	}
	.inputBox {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 300rpx;
		width: 750rpx;
		flex-direction: column;
		.inpt {
			width: 450rpx;
			height: 100rpx;
			box-sizing: border-box;
			padding: 10rpx;
			text-align: center;
			background: #FFFFFF;
			border-radius: 20rpx;
		}
	}
	.upCont {
		width: 100vw;
		height: 444rpx;
		background: #FC6B52;
		box-sizing: border-box;
		padding: 96rpx 96rpx  76rpx  96rpx;
		display: flex;
		flex-direction: column;
		// justify-content: center;
		align-items: center;
	}
	.BelowCon {
		width: 100vw;
		height: calc(100vh - 544rpx);
		box-sizing: border-box;
		position: relative;
	}
	.titleCla {
		width: 100vw;
		height: 100rpx;
		line-height:100rpx;
		text-align: center;
		font-weight: bold;
		font-size: 34rpx;
		position: sticky;
		top: 0;
		background: #FFFFFF;
	}
	.montCla {
		width: 100vw;
		height: 160rpx;
		box-sizing: border-box;
		background: #F5F5F5;
		position: sticky;
		top: 0;
		padding: 32rpx;
		display: flex;
		align-items: center;
		font-size: 34rpx;
		font-weight: bold;
		justify-content: space-between;
	}
	.detailsCla {
		height: 160rpx;
		width: 100vw;
		background: #FFFFFF;
		box-sizing: border-box;
		border-radius: 20rpx;
		border-top:#F5F5F5 1rpx solid ;
		padding: 46rpx 32rpx 46rpx 46rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.titCla {
		font-size: 34rpx;
		font-weight: bold;
		color: #FFFFFF;
	}
	.amountCla {
		font-size: 40rpx;
		font-weight: bold;
		color: #FFEF5D;
	}
	.monCla {
		font-size: 36rpx;
		font-weight: bold;
	}
	.popupCla {
		width: calc(100vw / 1.5);
		height: calc(100vh / 2);
		background: #FFFFFF;
		padding: 50rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}
	.inpCla {
		width: 100%;
		height: 70rpx;
		box-sizing: border-box;
		padding: 10rpx;
		color: 25rpx;
		text-align: center;
		font-size: 25rpx;
		border: 1rpx solid #FC6B52;
		border-radius: 10rpx;
		caret-color: #FC6B52;
		color: #FC6B52;
	}
	.btnCla {
		width: calc(100% / 1.2);
		display: flex;
		justify-content: space-between;
	}
</style>